<template>
  <page-meta :root-font-size="rootFontSize() + 'px'"></page-meta>

  <view class="transition-container" v-show="delayShow">
    <image class="transition-back" v-if="courseStep !== 0"
      src="https://rwstatic.tentons.cn/web/Lesson/images/header-back.png" @click="handleCallBack">
    </image>

    <template v-if="isSynthesis">
      <view class="transition-header">
        <image mode="widthFix" class="transition-start"
          :src="`https://rwstatic.tentons.cn/web/Lesson/images/course-part${courseStep}-start.png`" />
        <image v-if="courseStep !== 0" mode="widthFix" class="transition-next"
          src="https://rwstatic.tentons.cn/web/Lesson/images/course-part-next.png" />
        <image mode="widthFix" class="transition-title"
          :src="`https://rwstatic.tentons.cn/web/Lesson/images/course-part${courseStep}-title.png`" />
      </view>
      <image class="transition-footer"
        :src="`https://rwstatic.tentons.cn/web/Lesson/images/course-part${courseStep}-footer.jpg`" />
    </template>
    <image v-else mode="widthFix" class="transition-page"
      :src="`https://rwstatic.tentons.cn/web/Lesson/images/day${day_num}-transition.png`" />

    <view class="transition-operate" :style="{ justifyContent: lastCourseStep < 0 ? 'center' : 'space-between' }">
      <button v-if="lastCourseStep >= 0" class="operate operate-prev" @click="handlePrev">重做上环节</button>
      <button class="operate operate-next" @click="handleStartStudy">
        <template v-if="isSynthesis">
          {{ courseStep === 5 ? "继续" : "开始学习" }}
        </template>
        <template v-else>
          继续学习
          <image class="operate-next-right" src="https://rwstatic.tentons.cn/web/Lesson/images/button-right-icon.png" />
        </template>
      </button>
    </view>
  </view>

  <CwCommon />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { rootFontSize, util } from "@/utils/util";
import { onLoad } from "@dcloudio/uni-app";
import type { ILessonResult } from "@/pages/lowPricedCourse/trialCourseHome/courseList/index.vue";
import { handleSetCallFunction } from "@/pages/lowPricedCourse/trialCourseHome/index";
import { useDelayShow } from "@/hooks/useDelayShow";

const { delayShow } = useDelayShow();

const lastCourseStep = ref(-1);
const courseStep = ref(0);
const section_id = ref(-1);
const isSynthesis = ref(true);
const day_num = ref(1);
const free_talk_id = ref(-1);

const data = ref<ILessonResult | null>(null);
onLoad((option: any) => {
  courseStep.value = Number(option.courseStep);
  section_id.value = option.section_id;
  if (option.lastCourseStep) {
    lastCourseStep.value = Number(option.lastCourseStep);
  }
  if (option.isSynthesis) {
    isSynthesis.value = option.isSynthesis === "true";
  }
  if (option.day_num) {
    day_num.value = Number(option.day_num);
  }
  if (option.free_talk_id) {
    free_talk_id.value = Number(option.free_talk_id);
  }
  if (option.data) {
    data.value = JSON.parse(decodeURIComponent(option.data));
  }
});

const handleCallBack = () => {
  const pages = getCurrentPages();

  if (pages.length <= 1) {
    uni.reLaunch({
      url: `/pages/lowPricedCourse/trialCourseHome/trialCourse/index`,
    });
  } else {
    uni.navigateBack({
      delta: 1,
    });
  }
};

const handlePrev = () => {
  util.showModal({
    isShowModal: true,
    title: "重做需要重做整个环节，确定要重做吗？",
    confirmBtnText: "确定重做",
    success: () => handleConfirm(),
  });
};

const handleStartStudy = () => {
  if (free_talk_id.value !== -1) {
    uni.reLaunch({
      url: `/pages/home/freeTalk/index?free_talk_id=${free_talk_id.value}`,
    });

    return;
  }

  let { func, lessonPage } = handleSetCallFunction(courseStep.value);

  // 如果存在传入的页面数据，直接跳转学习页面
  if (data.value) {
    if (courseStep.value === 0 && data.value.isPreLearn) {
      lessonPage = "/pages/lowPricedCourse/dialogueOriginText/preLearnWords/index";
    }

    uni.redirectTo({
      url: `${lessonPage}?section_id=${section_id.value}&courseStep=${courseStep.value}&lastCourseStep=${lastCourseStep.value}&isSynthesis=${isSynthesis.value}&data=${encodeURIComponent(JSON.stringify(data.value))}`,
    });
    return;
  }

  // 其他情况请求数据直接跳转学习界面
  if (func) {
    func(section_id.value).then((res: ILessonResult) => {
      if (courseStep.value === 0 && res.isPreLearn) {
        lessonPage = "/pages/lowPricedCourse/dialogueOriginText/preLearnWords/index";
      }

      uni.redirectTo({
        url: `${lessonPage}?section_id=${section_id.value}&courseStep=${courseStep.value}&lastCourseStep=${lastCourseStep.value}&isSynthesis=${isSynthesis.value}&data=${encodeURIComponent(JSON.stringify(res))}`,
      });
    })
      .catch((err) => { });
  }
};

const handleConfirm = () => {
  let type = lastCourseStep.value;
  let { func, lessonPage } = handleSetCallFunction(type);

  if (func) {
    func(section_id.value).then((res: ILessonResult) => {
      if (type === 0 && res.isPreLearn) {
        lessonPage = "/pages/lowPricedCourse/dialogueOriginText/preLearnWords/index";
      }

      uni.redirectTo({
        url: `${lessonPage}?section_id=${section_id.value}&courseStep=${type}&data=${encodeURIComponent(JSON.stringify(res))}`,
      });
    })
      .catch((err) => { });
  }
};
</script>

<style scoped lang="scss">
.transition-container {
  position: absolute;
  width: 37.5rem;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;

  .transition-back {
    position: absolute;
    width: 4.6rem;
    height: 4rem;
    top: 4.4rem;
    left: 1.5rem;
    z-index: 2;
  }

  .transition-header {
    position: relative;
    width: 24rem;
    height: 16.6rem;
    padding-top: 15rem;
    margin-left: 2.8rem;
    z-index: 1;

    .transition-start {
      width: 24rem;
    }

    .transition-next {
      position: absolute;
      width: 14.4rem;
      left: 0.4rem;
      bottom: 14rem;
      z-index: -1;
    }

    .transition-title {
      position: absolute;
      width: 24rem;
      left: 0;
      z-index: 2;
    }
  }

  .transition-footer {
    position: absolute;
    width: 57.5rem;
    height: 60rem;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

  .transition-page {
    width: 37.5rem;
  }

  .transition-operate {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 4.7rem;
    left: 3.7rem;
    right: 3.7rem;

    .operate {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 13rem;
      height: 5rem;
      margin: 0;
      font-family: xiaolai;
      font-size: 1.7rem;
      border-radius: 1rem;
      color: $uni-text-color;
      border: 2px solid $uni-btn-border;
    }

    .is-hover {
      color: rgba(255, 255, 255, 0.6);
    }

    .operate-prev {
      background-color: $uni-btn-minor;
    }

    .operate-next {
      background-color: $uni-btn-prime;
    }

    .operate-next-right {
      width: 1.2rem;
      height: 1.2rem;
    }
  }
}
</style>
